    <template>
        <div class="person">
           <h2>当前求和为:{{ sum }} 放大十倍后{{ bigSum }}</h2>
           <button @click="add">点我+1</button>
           <hr>
           <img v-for="(dog,index) in dogList" :src="dog" :key="index"><br>
           <button @click="getDog">再来一只狗</button>
        </div>
    </template>



<!-- 下面的写法是setup语法糖 -->
<script setup lang="ts" name="person123">
   import useDog from '@/hooks/useDog';
   import useSum from '@/hooks/useSum';

   const{sum,add,bigSum} = useSum()
   const{dogList,getDog} = useDog()
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0px 5px;
}

img{
    height: 100px;
}
</style>